<template>
  <div>
    <div class="login">
      <van-nav-bar>
        <!-- 插槽#===v-slot -->
        <template #left>
          <div class="logo-box">
            <div class="logo">
              <!-- <img class="auto-img" :src='img' /> -->
            </div>
            <div class="logo-text">壹&nbsp; 嗒&nbsp; 音 &nbsp;乐</div>
          </div>
        </template>
        <template #right>
          <div class="guang" @click="goPage('Home')">游客模式</div>
        </template>
      </van-nav-bar>
      <div class="welcome-login"></div>
      <h1>欢迎登陆</h1>
      <van-tabs v-model="active">
        <!-- 验证码登录 -->
        <van-tab title="验证码登录">
          <div class="login-form">
            <div class="form-item">
              <span class="iconfont">
                <i class="fa fa-user-circle-o" aria-hidden="true"></i>
              </span>
              <input
                class="phone"
                type="text"
                placeholder="手机号码"
                v-model="phone"
              />
            </div>
            <div class="form-item">
              <span class="iconfont">
                <i class="fa fa-commenting" aria-hidden="true"></i>
              </span>
              <input type="text" placeholder="验证码" v-model="code" />
              <button class="get-code" @click="getCode">发送</button>
            </div>
            <div class="form-item">
              <div class="submit" @click="submitCode">提交</div>
            </div>
          </div>
        </van-tab>
        <!-- 密码登录 -->
        <van-tab title="账号密码登录">
          <div class="login-form">
            <div class="form-item">
              <span class="iconfont">
                <i class="fa fa-user-circle-o" aria-hidden="true"></i>
              </span>
              <input
                class="phone"
                type="text"
                placeholder="手机号码"
                v-model="phone"
              />
            </div>
            <!-- 密码框 -->
            <div class="form-item">
              <span class="iconfont">
                <i :class="['fa',bool? 'fa-eye':'fa-eye-slash']" aria-hidden="true" @click="bool=!bool"></i>
              </span>
              <input
                class="phone"
                :type="bool ?'text':'password'"
                placeholder="密码"
                v-model="password"
              />
            </div>

            <div class="form-item">
              <div class="submit" @click="submitPass">提交</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>

      <p class="foot-txt" @click="$router.push({ path: '/register' })">
        没有账号,欢迎注册 &nbsp;
        <i class="fa fa-angle-double-right" aria-hidden="true"></i>
      </p>
      <div class="form-foot">
        <div class="foot-sign">
          <i class="fa fa-weixin" aria-hidden="true"></i>
        </div>
        <div class="foot-sign">
          <i class="fa fa-weibo" aria-hidden="true"></i>
        </div>
        <div class="foot-sign">
          <i class="fa fa-qq" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//消息通知
import { Notify } from "vant";
import {
  getCaptchaSent,
  getCaptchaVerify,
  getLoginCellphone,
} from "../../api/login";
export default {
  data() {
    return {
      phone: "",
      code: "",
      password: "",
      active: 1, //激活tab选项
      bool:false, //控制显示密码
    };
  },
  methods: {
    //跳转页面(游客模式)
    goPage(name) {
      this.$router.push({ name });
    },
    //点击发送按钮
    getCode() {
      let reg =
        /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|17[0-9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      //验证手机号
      if (!reg.test(this.phone)) {
        Notify({ type: "warning", message: "请输入正确的手机号!" });
        return;
      }
      // 发送请求验证码
      getCaptchaSent({ phone: this.phone })
        .then((data) => {
          console.log(data);
        })
        .catch((err) => {});
    },
    //提交按钮 验证码
    submitCode() {
      //验证码正则 0-9的四位数字
      let reg = /^[0-9]{4}$/;
      if (!reg.test(this.code)) {
        Notify({ type: "warning", message: "请输入正确的验证码" });
        return;
      }
      //传递手机号 和验证码 请求数据
      getCaptchaVerify({
        phone: this.phone,
        captcha: this.code,
      }).then((data) => {
        console.log(data);
        
        // 设置 login 登录状态
        window.localStorage.setItem("login", "true");
        //个人中心判断是否登陆
        // this.$router.push({path:'/userInfo'});
        // 获取引导页状态
        if (window.localStorage.getItem("guidePage")) {
          this.$router.push({ path: "/home" });
        } else {
          // 跳转到引导页
          this.$router.push({ path: "/guidePage" });
        }
      });
    },
    //提交按钮 密码
    submitPass() {
        //手机号登录
        getLoginCellphone({ phone: this.phone, password: this.password }).then(data=>{
            console.log(data);
        })
    }
  },
};
</script>

<style lang="less" scoped>
@import url("../../assets/css/base.less");
/deep/ .van-nav-bar__left {
    left: 60px;
}

   /deep/ .van-tabs__nav{
      background-color:#db9a9d!important;
    
    }

.van-nav-bar {
  background-color: @mainColor;
}

.login {
  height: 100%;
  width: 100%;
  background-color: #db9a9d;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .welcome-login {
    height: 90px;
    width: 90px;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 70px;
    margin-bottom: 10px;
    background-image: url("../../assets/images/login02.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
  h1 {
    font-size: 30px;
    text-align: center;
    height: 30px;
    padding: 10px 0 30px 0;
  }
  .login-form {
      margin-top: 10px;
    .form-item {
      background-color: #f7bcbf;
      width: 76%;
      height: 40px;
      line-height: 40px;
      margin: 0 auto;
      border-radius: 40px;
      margin-bottom: 12px;
      input {
        background-color: transparent;
        border: 0;
        outline: none;
        text-indent: 0.5em;
        font-size: 14px;
        color: #fff;
      }
      input.phone {
        margin-right: 60px;
      }
      span {
        font-size: 20px;
        margin-left: 10px;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 5px;
      }
      .get-code {
        border: 1px solid #fff;
        height: 25px;
        line-height: 25px;
        width: 50px;
        border-radius: 20px;
        font-size: 12px;
        color: #565656;
        float: right;
        margin: 8px;
      }
      .submit {
        font-size: 16px;
        background-color: #fff;
        text-align: center;
        color: #db9a9d;
        border-radius: 16px;
      }
    }
  }
  .foot-txt {
    margin-top: 20px;
    font-size: 16px;
  }
  .form-foot {
    width: 100%;
    position: fixed;
    bottom: 70px;
    left: 0;
    display: flex;
    justify-content: center;
    .foot-sign {
      margin-right: 30px;
      font-size: 25px;
    }
    .foot-sign:nth-of-type(1) {
      color: #0a7c3d;
    }
    .foot-sign:nth-of-type(2) {
      color: #e4393c;
    }
    .foot-sign:nth-of-type(3) {
      color: #e5e5e6;
    }
  }
  .logo-box {
    display: flex;
    align-items: center;
  }
  .logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }
  .logo-text {
    margin-left: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
  }
}
</style>